<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="work2.css">
</head>
<body>
    <div id="contentDiv">
        <select multiple id="leftSelect">
            <option>China</option>
            <option>Japan</option>
            <option>Spanish</option>
            <option>America</option>
            <option>England</option>
        </select>
        <div id="midBtn">
            <input type="button" value=">" onclick="$('#rightSelect').append($('#leftSelect option:selected'))">
            <input type="button" value=">>" onclick="$('#rightSelect').append($('#leftSelect option'))">
            <input type="button" value="<" onclick="$('#leftSelect').append($('#rightSelect option:selected'))">
            <input type="button" value="<<" onclick="$('#leftSelect').append($('#rightSelect option'))">
        </div>
        <select multiple id="rightSelect"></select>
    </div>
</body>
</html>